﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
<div class="container-div" id="materielTrack-vue">
    <!-- 搜索条件区 -->
    <div>
        <el-row :gutter="20">
            <el-col :span="5">
                <el-input v-model="materielCode" placeholder="请输入物料码/产品编码"></el-input>
            </el-col>
            <el-col :span="10">
                <el-date-picker v-model="timeValue"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" v-on:click="Search()">搜索</el-button>
            </el-col>
        </el-row>
    </div>
    <!-- 返回按钮 -->
    <div v-show="showDetail" style="margin-bottom:5px;">
        <el-row>
            <el-col :span="4" :offset="20">
                <el-button icon="el-icon-back" circle type="success" v-on:click="showBack()"></el-button>
            </el-col>
        </el-row>
    </div>
    <!-- 总览区 -->
    <div v-if="!showDetail" style="margin-top:15px">
        <el-table :data="totalData"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="materielCode"
                             label="物料码">
            </el-table-column>
            <el-table-column prop="date"
                             label="时间">
                <template slot-scope="scope">
                    {{scope.row.date | timeFilter}}
                </template>
            </el-table-column>
            <el-table-column prop="result"
                             :filters="[{text:'合格',value:'合格'},{text:'不合格',value:'不合格'},{text:'加工中',value:'加工中'}]"
                             :filter-method="filterPriority"
                             label="结果">
                <template slot-scope="scope">
                    <el-tag :type="resultFormatter(scope.row.result)">
                        {{scope.row.result}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="详情" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="showDetailM(scope)" href="javascript:void(0)">查看</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 详情区 -->
    <div v-if="showDetail">
        <el-table :data="detailData"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="materielCode"
                             label="物料码">
            </el-table-column>
            <el-table-column prop="device"
                             label="处理设备">
                <template slot-scope="scope">
                    {{scope.row.device | deviceFilter}}
                </template>
            </el-table-column>
            <el-table-column prop="date"
                             label="时间">
                <template slot-scope="scope">
                    {{scope.row.date | timeFilter}}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页区 -->
    <div v-if="!showDetail" style="margin:50px 30px;margin-top:20px;">
        <el-pagination background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                       :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
        </el-pagination>
    </div>
</div>

<script>
    let app = new Vue({
        el: '#materielTrack-vue',
        data: {
            materielCode: null,
            timeValue: [],
            pageSize: 1,  // 当前页码
            limit: 5,  //每页数据条数
            total: 0,
            showDetail: false,
            totalData: [],
            detailData:[]
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.Search();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.Search();
            },
            // 误差数据结果类型过滤
            resultFormatter(data) {
                let result = "info"
                if (data == "合格") {
                    result = "success";
                } 
                if (data == "不合格") {
                    result="danger"
                }
                if (data == "加工中") {
                    result="info"
                }
                return result;
            },
            // 搜索
            Search() {
                this.showDetail = false;
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                const searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                const searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/ReportManage/ReportApi/getMaterielTrack")'
                axios.get(url, {
                    params: {
                        likeMCode: this.materielCode,
                        pageSize: this.pageSize,
                        limit: this.limit,
                        stime: searchStart,
                        etime: searchEnd
                    }
                }).then(res => {
                    console.log(res)
                    this.totalData = [];
                    this.total = res.data.total
                    let data = res.data.result;
                    for (let i = 0; i < data.length; i++) {
                        let = ProductionResult = "加工中";
                        if (data[i].DeviceCode == "NgCar") {
                            ProductionResult = "不合格"
                        }
                        if (data[i].DeviceCode == "DownCar01" || data[i].DeviceCode == "DownCar02") {
                            ProductionResult = "合格"
                        }
                        this.totalData.push({
                            "materielCode": data[i].ProductionId,
                            "result": ProductionResult,
                            "date": data[i].UpdateTime
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '获取物料码信息失败!' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 合格不合格筛选
            filterPriority(value, row) {
                return row.result == value
            },
            // 查看详情
            showDetailM(scope) {
                this.showDetail = true;
                let mCode = scope.row.materielCode
                let url = '@Url.Content("~/ReportManage/ReportApi/getDetailMCode")'
                axios.get(url, {
                    params: {
                        materielCode: mCode
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.result) {
                        let data = res.data.data;
                        this.detailData = [];
                        for (let i = 0; i < data.length; i++) {
                            this.detailData.push({
                                "materielCode": data[i].ProductionId,
                                "device": data[i].DeviceCode,
                                "date": data[i].UpdateTime
                            })
                        }
                    } else {
                        this.$message({
                            showClose: true,
                            duration: 2500,
                            message: '获取物料码信息失败!' + res.data.message,
                            type: 'error',
                            offset: 80
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '获取物料码信息失败!' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 返回按钮
            showBack() {
                this.showDetail = false;
            }
        },
        filters: {
            // 时间显示过滤
            timeFilter(date) {
                let part1Date = date.split("T")[0];
                let part2Date = date.split("T")[1].split(".")[0];
                return part1Date + " " + part2Date
            },
            // 设备显示过滤
            deviceFilter(device) {
                let data = "未知"
                switch (device) {
                    case "HoleDepthMeasure": {
                        data = "孔深测量"
                        break;
                    }
                    case "CacheStation01": {
                        data = "缓存台1"
                        break;
                    }
                    case "CacheStation02": {
                        data = "缓存台2"
                        break;
                    }
                    case "CacheStation03": {
                        data = "缓存台3"
                        break;
                    }
                    case "CacheStation04": {
                        data = "缓存台4"
                        break;
                    }
                    case "CacheStation05": {
                        data = "缓存台5"
                        break;
                    }
                    case "CacheStation06": {
                        data = "缓存台6"
                        break;
                    }
                    case "DownCar01": {
                        data = "下料车1"
                        break;
                    }
                    case "DownCar02": {
                        data = "下料车2"
                        break;
                    }
                    case "LoadCar01": {
                        data = "上料车1"
                        break;
                    }
                    case "LoadCar02": {
                        data = "上料车2"
                        break;
                    }
                    case "NgCar": {
                        data = "废料车"
                        break;
                    }
                    case "Scanner": {
                        data = "扫码器"
                        break;
                    }
                    case "LaserMark": {
                        data = "激光打码"
                        break;
                    }
                    case "Manipulator": {
                        data = "机器人"
                        break;
                    }
                    case "Lathe01": {
                        data = "数控机床1"
                        break;
                    }
                    case "Lathe02": {
                        data = "数控机床2"
                        break;
                    }
                    case "Lathe03": {
                        data = "数控机床3"
                        break;
                    }
                    case "ThreeCoordinatesMeasure": {
                        data = "三坐标测量"
                        break;
                    }
                    case "WashMachine": {
                        data = "清洗机"
                        break;
                    }
                }
                return data;
            }
        },
        mounted() {

        }
    })
</script>

